<!--
 * @Description: 
 * @Author: 赵华宇
 * @Date: 2025-04-27 09:58:03
 * @LastEditors: 赵华宇
 * @LastEditTime: 2025-04-27 10:02:25
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直对齐方式</title>
    <style>
        div{
            border:1px solid black;

        }
        img{
            /* vertical-align: middle; 垂直居中 */
            /* vertical-align: top;  顶部对齐 最高内容的顶部 */
            /* vertical-align: bottom; 底部对齐 最高内容的底部*/
            /* 因为浏览器把行内块 行内标签当成文字处理，默认按基线对齐
            效果：因为img的底下有空白，将块级不按基线对齐，空白就消失了*/
            display:block;
        }
    </style>
</head>
<body>
  <div>
    <img src="./images1/1.jpg" alt="">
    <!-- 我是谁？我在哪儿？我在干吗？ -->
  </div>  
</body>
</html>